<template>
  <div style="font-size: 16px">
    <p>pageRouter: #/mixinTest</p>
    <br />
    <div style="border: 1px solid pink">
      <p>msg: {{ msg }}</p>
      <br />
      <p>$options: {{ $options.myOption }}</p>
      <br />
      <pre
        >{{ obj }}
      </pre>
    </div>
    <br />
    <br />

    <button @click="changeMsg1">parentVue的按钮1</button
    >&nbsp;&nbsp;&nbsp;&nbsp;
    <!-- -->
    <button @click="changeMsg2">parentVue的按钮2</button>
    <br />
    <br />
    <hr />
    <p>数据对象合并</p>
    <br />
    <p>
      数据对象在内部会进行浅合并
      (一层属性深度)，在和组件的数据发生冲突时以组件数据优先
    </p>
    <hr />
    <br />
    <br />
    <hr />
    <p>钩子函数合并</p>
    <br />
    <p>
      同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
    </p>
    <hr />
    <br />
    <br />
    <hr />
    <p>methods, components 和 directives合并</p>
    <br />
    <p>
      methods, components 和
      directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
    </p>
    <hr />
    <br />
    <br />
    <hr />
    <p>全局混入</p>
    <br />
    <p>一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。</p>
    <hr />
    <br />
    <a
      href="https://www.jianshu.com/p/c34a30cc4e6f?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=weixin"
      style="color: pink"
      >详情</a
    >
  </div>
</template>
<script>
import mixin1 from './mixin1'
import mixin2 from './mixin2'
export default {
  // 混入顺序从左往右 但都是比在组件自身钩子之前调用
  mixins: [mixin2, mixin1],
  name: 'parentVue',
  components: {},
  myOption: '测试自定义myOptions',
  data() {
    return {
      //  msg: 'app'
      obj: {
        a: [1, 2],
        b: { test: '合并型' }
      }
    }
  },
  methods: {
    changeMsg2() {
      this.msg += 2
    }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
